<template>
  <div>
    <a-card class="contentFullHeight"  :bodyStyle="{padding : '10px 10px'}">
      <div class="">
        <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
          <a-form layout="inline">

            <a-form-item label="名称">
              <a-input v-model="searchParams.name"></a-input>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
            </a-form-item>

            <a-form-item v-if="isAuth('sys:menu:save')">
              <a-button type="primary" icon="plus" @click="handleCreate">新增</a-button>
            </a-form-item>


          </a-form>
        </a-card>
      </div>


      <a-table :columns="columns" :dataSource="data"
               bordered size="small" rowKey="id"
               :pagination="false" :loading="loading"

      >


        <span slot="action" slot-scope="text, record">
        <template>
          <a  v-if="isAuth('sys:menu:update')"  href="javascript:;" @click="handleUpdate(record)">修改</a>
          <a-divider type="vertical"/>
          <a  v-if="isAuth('sys:menu:delete')"  href="javascript:;" @click="handleDelete(record)">删除</a>
        </template>
      </span>

      </a-table>

      <a-modal  :maskClosable="false"
        :title="mdl.dialogTitleMap[mdl.dialogStatus]"
        :width="700"
        v-model="mdl.visible"
        @ok="mdl.dialogStatus === 'update' ?  updateData() : createData() "
      >

        <a-form>

          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="菜单类型"
          >
            <a-radio-group :options="menuTypeOptions"  v-model="mdl.formData.type" />
          </a-form-item>

          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            :label=" menuTypeName + '名称'"
          >
            <a-input placeholder="" v-model="mdl.formData.title"     :placeholder=" menuTypeName + '名称'" />
          </a-form-item>

          <a-form-item
            v-if="mdl.formData.type !== 2"
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="路径"
          >
            <a-input placeholder="" v-model="mdl.formData.path"    placeholder="路径(从views目录开始)" />
          </a-form-item>


          <a-form-item
            v-if="mdl.formData.type !== 2"
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="组件名"
          >
            <a-input placeholder="" v-model="mdl.formData.component"   placeholder="如: 'Data'"/>
          </a-form-item>

          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="上级菜单"
          >
            <a-tree-select
              style="width: 300px"
              :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
              :treeData="menuTreeData"
              placeholder="Please select"
              treeDefaultExpandAll
              v-model="mdl.formData.parentId"
            >
            </a-tree-select>
          </a-form-item>

          <a-form-item
            v-if="mdl.formData.type !== 0"
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="授权标识">
            <a-input v-model="mdl.formData.perms" placeholder="如: sys:user:add, sys:user:edit, sys:user:delete"/>
          </a-form-item>

          <a-form-item
            v-if="mdl.formData.type === 1"
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="组件导入路径">
            <a-row :gutter="24">
              <a-col :span="22">
                <a-input v-model="mdl.formData.component" placeholder="组件导入路径"/>
              </a-col>
              <a-col :span="2">
                <a-tooltip placement="top">
                  <template slot="title">
                    <p>URL格式：</p>
                    <p>1.常规业务开发的功能URL，如用户管理，Views目录下页面路径为 /Sys/User, 此处填写 /sys/user。</p>
                    <p>2.嵌套外部网页，如通过菜单打开百度网页，此处填写 http://www.baidu.com，http:// 不可省略。</p>
                    <p>示例：用户管理：/sys/user 嵌套百度：http://www.baidu.com 嵌套网页：http://127.0.0.1:8000</p>
                  </template>
                  <a-icon type="info-circle" />
                </a-tooltip>
              </a-col>
            </a-row>

          </a-form-item>

          <a-form-item
            v-if="mdl.formData.type !== 2"
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="排序编号" >
            <a-input-number v-model="mdl.formData.orderNum" :min="0" controls-position="right" label="排序编号"/>
          </a-form-item>

          <a-form-item
            v-if="mdl.formData.type !== 2"
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="菜单图标" >
            <a-input v-model="mdl.formData.icon" :disabled="false" placeholder="菜单图标名称（如：）" />


          </a-form-item>


          <a-form-item
            v-if="mdl.formData.type !== 2"
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="是否显示"
          >
            <a-switch checkedChildren="是" unCheckedChildren="否" v-model="mdl.formData.hidden" />
          </a-form-item>



        </a-form>
      </a-modal>

    </a-card>


  </div>
</template>

<script>

  import {
    queryMenuList,
    queryMenuTree,
    menuInsert,
    menuDelete,
    menuUpdate
  } from "@/api/system/menu"

  const align = 'center'

  const menuTreeData =  [
    {
      title: 'Node1',
      value: '0-0',
      key: '0-0',
      children: [
        {
          value: '0-0-1',
          key: '0-0-1',
          title: 'Child Node1',
        },
        {
          title: 'Child Node2',
          value: '0-0-2',
          key: '0-0-2',
        },
      ],
    },
    {
      title: 'Node2',
      value: '0-1',
      key: '0-1',
    },
  ];

  export default {
    components: {},
    data() {
      return {

        menuTypeOptions:[
          { label: '目录', value: 0 },
          { label: '菜单', value: 1},
          { label: '按钮', value: 2 },
        ],
        menuTreeData,

        /*   -------搜索框--------*/
        searchParams: {
          name: ''
        },

        /*   -------弹窗--------*/
        mdl: {
          dialogStatus: '',
          dialogTitleMap: {
            update: '编辑',
            create: '添加',
            lowerLevel:'添加下级机构'
          },
          visible: false,
          title: '',
          formData: {
            hidden: true,
            id: 0,
            icon: '',
            name: '',
            orderNum: 0,
            parentId: '0-0',
            path: '',
            perms: '',
            redirect:"",
            title: '',
            type: 1,
             url: "",
            component: '',
          },
          labelCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 5
            }
          }
          ,
          wrapperCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 16
            }
          }
          ,
        },


        /*   -------表格--------*/
        loading: false,
        columns:  [
          {
            title: 'ID',
            dataIndex: 'id',
            align
          },
          {
            title: '菜单名称',
            dataIndex: 'title',
            align
          },
          {
            title: '菜单类型',
            dataIndex: 'type',
            align
          },
          {
            title: '上级菜单',
            dataIndex: 'parentTitle',
            align
          },
          {
            title: '路由名称',
            dataIndex: 'name',
            align
          },
          {
            title: '路由path',
            dataIndex: 'path',
            align
          },
          {
            title: '路由组件',
            dataIndex: 'component',
            align
          },
          {
            title: '路由图标',
            dataIndex: 'icon',
            align
          },
          {
            title: '路由授权标识',
            dataIndex: 'perms',
            align
          },
          {
            title: '路由参数',
            dataIndex: 'params',
            align
          },

          {
            title: '菜单排序号',
            dataIndex: 'orderNum',
            align
          },
          {
            title: '是否显示',
            dataIndex: 'hidden',
            align
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            align,
            scopedSlots: { customRender: 'action' }
          }
        ],
        data: [],
        selectedRowKeys: [], // Check here to configure the default column

      }
    },
    inject: ['upShow'],filters: {},
    created() {

    },
    computed:{
      menuTypeName(){
        console.log("mdl", this.mdl)
        console.log("formData",this.mdl.formData)
        console.log("type",this.mdl.formData.type)
       const index =  this.mdl.formData.type
        console.log("index",index)
        return this.menuTypeOptions[index].label
      }
    },

    mounted() {
      this.getTableData()
    },
    methods: {

      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
      },

      getTableData() {

        this.loading = true

        const parameter = {
          _search: false,//是否分页查询
          data: this.searchParams
        }
        queryMenuList(parameter).then(res => {
          if(res.code===200){
            this.data =   this.$util.filterRowChildren(res.data)
            this.loading = false
          }
          this.loading = false

        }).catch(err => {
          this.loading = false
          this.upShow(2,'操作失败')
        })
      },
      handleSearch() {
        this.getTableData()
      },

      setDefaults() {
        this.mdl.formData = {
          hidden: true,
          id: 0,
          icon: '',
          name: '',
          orderNum: 0,
          parentId: '0-0',
          path: '',
          perms: '',
          redirect:"",
          title: '',
          type: 1,
          url: "",
          component: '',
        }
      },
      //添加行
      handleCreate() {
        this.setDefaults()
        this.mdl.dialogStatus = 'create'
        this.mdl.visible = true

      },
      createData() {
        const parameter = this.mdl.formData
        parameter.parentId = 0
        menuInsert(parameter).then(res => {
          if (res.code === 200
          ) {
            this.upShow(1,"添加数据")
            this.mdl.visible = false
            this.handleSearch()
          } else {
           this.upShow(2,res.msg)
          }

        }).catch(err => {
          this.upShow(2)
        })
      },

      //编辑当前行
      handleUpdate(row) {
        console.log("这一行", row)
        this.mdl.formData = Object.assign(this.mdl.formData, row) // copy obj
        this.mdl.dialogStatus = 'update'
        this.mdl.visible = true
      },

      updateData(row) {
        this.upShow(2,"修改数据")
        // const parameter = {
        //   name: this.mdl.formData.name,
        //   id: this.mdl.formData.id,
        //   type:this.mdl.formData.type,
        //   parentName: this.mdl.formData.parentName,
        //   pid: this.mdl.formData.pid,
        // }

        let parameter = this.mdl.formData
        menuUpdate(parameter).then(res => {
          if (res.code === 200 ) {
            this.upShow(2,"操作成功")
            this.mdl.visible = false
            this.handleSearch()
          } else {
           this.upShow(2,res.msg)
          }

        }).catch(err => {
          this.upShow(2)
        })
      },

      handleDelete(row) {
        menuDelete(row.id).then(res => {
          if (res.code === 200
          ) {
            this.upShow(1,res.msg || '删除成功')
            this.handleSearch()
          } else {
           this.upShow(2,res.msg)
          }

        }).catch(err => {
          this.upShow(2)
        })
      },

      handleLowerLevel(row) {
        this.setDefaults()
        this.mdl.formData.parentId = row.id // copy obj
        this.mdl.formData.parentName = row.name
        this.mdl.dialogStatus = 'lowerLevel'
        this.mdl.visible = true
      },


    }
  }
</script>

<style scoped>

</style>
